Ask AI
Skip to main content

Embedding Your NoCode-X Application as an HTML Component

Short Version​

Objective:
NoCode-X makes it simple to turn your app into a plug-and-play HTML component. Just build, parameterize, copy, and paste—your app is live and dynamic, ready to interact with your users and your site.

How to Embed:

  1. Build your NoCode-X app.
  2. Add template parameters (e.g., user) for dynamic data.
  3. Copy the generated HTML code.
  4. Paste it into your webpage.
  5. Set parameters directly in the HTML tag.

Example:

<nocodex-page 
  host="https://regcompass-assistento-fc.back.nocode-x.com"
  applicationid="7eaa59a3-87bc-4dac-aeb8-132974362ae6"
  templateid="5b6c22f7-6926-4029-81af-c02e025cd981"
  user="your-username-here">
</nocodex-page>
<script src="https://frontoffice.nocode-x.com/nocodex-page.js"></script>

Detailed version​

Objective:
Seamlessly embed your NoCode-X application as a reusable HTML component in any website or web application. With built-in parameterization, you can pass dynamic data and customize the look and behavior of your app directly from your HTML code—no coding required.

What You Can Do:

  • Build your NoCode-X app visually, without code.
  • Parameterize your app by adding template parameters (like user, theme, or any data value) for dynamic content and behavior.
  • Embed your app as a custom HTML tag anywhere on your site.
  • Customize the appearance and data using HTML attributes and CSS.

Step-by-Step Guide​

Step 1: Create Your Template
Design and configure your template in NoCode-X.

Step 2: Add Template Parameters
In the top ribbon, go to Template Parameters and add any parameters you want to use (e.g., user).
Add template parameters

Step 3: Get the HTML-code to embed
In the top menu, navigate to the Code Placeholder section.
Get HTML-code to embed

Step 4: Copy the Code
Click the Copy button to copy the generated HTML snippet.

Step 5: Embed in Your HTML
Paste the code into your HTML page where you want the app to appear.

Step 6: Set Parameters in HTML
Add or update parameters directly in the <nocodex-page> tag. For example, to set the user parameter:

<nocodex-page 
  host="https://regcompass-assistento-fc.back.nocode-x.com"
  applicationid="7eaa59a3-87bc-4dac-aeb8-132974362ae6"
  templateid="5b6c22f7-6926-4029-81af-c02e025cd981"
  user="your-username-here">
</nocodex-page>
<script src="https://frontoffice.nocode-x.com/nocodex-page.js"></script>

Tip:
You can add as many parameters as you've defined in your template. You can also style the component with CSS for a seamless look and feel.